<template>
    <div id="app">
    <h2 class="title">图片循环切换</h2>
    <!-- 显示图片 -->
    <img :src="imgSrcArr[index]" alt="" />
    <p>
      <!-- 点击上一张按钮，显示上一张图片，如果是第一张则显示最后一张 -->
      <button @click="prev">上一张</button>
      <!-- 点击下一张按钮，显示下一张图片，如果是最后一张则显示第一张 -->
      <button @click="next">下一张</button>
    </p>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 显示图片的 src 地址
const imgSrcArr = ref([
    require("../../Demo基础模板/img/1.jpg"),
    require("../../Demo基础模板/img/2.jpg"),
    require("../../Demo基础模板/img/3.jpg"),
    require("../../Demo基础模板/img/4.jpg"),
    require("../../Demo基础模板/img/5.jpg"),
])

// 记录索引的值
const index = ref(2)

const next = () => {
    index.value === imgSrcArr.value.length -1 ?
    (index.value=0)
    : index.value++
}

const prev = () => {
    index.value === 0 ?
    (index.value = imgSrcArr.value.length -1)
    : index.value--
}

</script>

<style lang="scss" scoped>
     #app {
      width: 100%;
      margin: 50px auto;
      text-align: center;
    }

    .title {
      color: #333;
    }

    img {
      height: 500px;
      box-shadow: 0 0 20px #ccc;
    }

    button {
      margin: 20px 5px 0;
      border-radius: 3px;
      cursor: pointer;
      border: none;
      padding: 5px 10px;
    }

    button:hover {
      color: green;
    }
</style>